<template>
  <div class="app-container article-container">
    <div class="content">
      <el-card shadow="never" class="article-header" style="margin: 0 0 20px">
        {{ articleData?.heading }}
        <div class="meta mt-1">
          <div class="muted">
            {{ getCategory(articleData?.categoryId as number) }}
          </div>
          <div class="muted">
            {{ articleData?.uploadTime?.replace("T", " ") }}
          </div>
        </div>
      </el-card>
      <el-card shadow="never">
        <articleCover
          v-if="articleData?.cover"
          class="flex-center"
          v-model="articleData.cover"
          width="220px"
          height="150px"
        />
        <el-divider style="margin: 1.25rem 0 0" />
        <div>
          <Editor
            style="font-weight: 300"
            :modelValue="articleData?.content"
            :defaultConfig="editorConfig"
            mode="default"
            @on-created="handleCreated"
          />
        </div>
      </el-card>
    </div>
    <el-affix class="sidebar" :offset="100" :z-index="200">
      <el-card class="sidebar">sidebar右侧导航</el-card>
    </el-affix>
  </div>
</template>

<script setup lang="ts">
import { Editor } from "@wangeditor/editor-for-vue";
import articleCover from "@/components/articleCover/index.vue";
import articleAPI, { type ArticleResult } from "@/api/article";
import categoryAPI, { type CategoryResult } from "@/api/category";

defineOptions({
  name: "",
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const editorConfig = { readOnly: true };

// 组件销毁时，也及时销毁编辑器
// onBeforeUnmount(() => {
//   const editor = editorRef.value;
//   if (editor == null) return;
//   editor.destroy();
// });

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const articleData = ref<ArticleResult>();
const categoryList = ref<CategoryResult[]>();
//类别功能
const getCategoryList = async () => {
  const data = await categoryAPI.getCategoryList({ page: 1, pageSize: 999 });
  categoryList.value = data.rows;
};

const getCategory = (id: number) => {
  const filter = categoryList.value?.filter((item: CategoryResult) => {
    return item.id === id;
  });
  return filter && filter.length > 0 ? filter[0].name : null;
};

const { currentRoute } = useRouter();

const watchTime = ref(0);

const up = (e: BeforeUnloadEvent) => {
  articleAPI.getByIdArticle({ id: 1 });
  e.preventDefault();
  e.returnValue = "";
};

let interval: NodeJS.Timeout;

const report = () => {};

// 监听浏览器关闭事件
onMounted(async () => {
  window.addEventListener("beforeunload", up);
  interval = setInterval(() => {
    watchTime.value++;
  }, 1000);
  if (!articleData.value) {
    getCategoryList();
    const result = await articleAPI.getByIdArticle({
      id: currentRoute.value.params.id as unknown as number,
    });
    articleData.value = result[0];
  }
});

//停止监听关闭事件
onBeforeUnmount(() => {
  window.removeEventListener("beforeunload", up);
  clearInterval(interval);
  watchTime.value = 0;
});
</script>

<style lang="scss" scoped></style>
